<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <%@ include file="../../static/head.jsp" %>

    <!-- font-awesome -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .myContainer {
        margin-right: 10px;
    }

    .searchGroupBox {
        margin-left: 10px;
        margin-right: 10px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }

    .well {
        min-height: 20px;
        padding: 19px;
        /*margin-bottom: 20px;*/
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
    }

    .flex-space-between {
        display: flex;
        justify-content: space-between;
        /*  交叉轴居中  */
        align-items: center;
    }

    .marginTop {
        margin-top: 10px;
    }

    .dataTable {
        min-height: 400px;
    }

    .flex_center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>
<!--/Pre Loader -->
<div class="wrapper">
    <!-- Page Content -->
    <div id="content">
        <!-- Top Navigation -->
        <%@ include file="../../static/topNav.jsp" %>
        <!-- Menu -->
        <div class="container menu-nav">
            <nav class="navbar navbar-expand-lg lochana-bg text-white">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="ti-menu text-white"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- <div class="z-navbar-nav-title">$template2.back.menu.title.text</div> -->
                    <ul id="navUl" class="navbar-nav mr-auto">
                    </ul>
                </div>
            </nav>
        </div>
        <!-- /Menu -->
        <!-- Breadcrumb -->
        <!-- Page Title -->
        <div class="container mt-0">
            <div class="row breadcrumb-bar">
                <div class="col-md-6">
                    <h3 class="block-title">试卷表管理</h3>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <span class="ti-home"></span>
                            </a>
                        </li>
                        <li class="breadcrumb-item"><span>试卷表管理</span></li>
                        <li class="breadcrumb-item active"><span>试卷表列表</span></li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- /Page Title -->

        <!-- /Breadcrumb -->
        <!-- Main Content -->
        <div class="container">
            <div class="myContainer" id="examinationPaperList">
                <!-- 搜索 start -->
                <div class="searchGroupBox well flex-space-between">
                    <div class="flex-space-between">
                        <span style="min-width: 86px;">试卷名称：</span>
                        <el-input v-model="paperName" placeholder="试卷名称" clearable></el-input>
                    </div>
                    <div>
                        <el-button type="success" icon="el-icon-search" @click="searchPaper">搜索</el-button>
                        <el-button type="success" @click="createTestPaperPage">新建试卷<i
                                class="el-icon-plus el-icon--right"></i></el-button>
                    </div>
                </div>
                <!-- 搜索 end -->

                <!-- 表格 start -->
                <div class="searchGroupBox well marginTop dataTable">
                    <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="paperName"
                                label="试卷名称"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="examDuration"
                                align="center"
                                label="考试时长(分钟)"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="试卷状态"
                                align="center"
                                :formatter="statusFormatter">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center"
                                width="190">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" circle
                                           @click="handleEdit(scope.row.id)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" circle
                                           @click="handleDelete(scope.row.id)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 表格 end -->

                <!-- 分页 start -->
                <div class="searchGroupBox well marginTop flex_center">
                    <div>
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="pageIndex"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>
                <!-- 分页 end -->
            </div>
            <div style="height: 20px;"></div>
        </div>
        <!-- /Main Content -->

    </div>
    <!-- /Page Content -->
</div>

<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top">
    <span class="ti-angle-up"></span>
</a>
<!-- /Back to Top -->
<%@ include file="../../static/foot.jsp" %>

<script>
    <%@ include file="../../utils/menu.jsp"%>
    <%@ include file="../../static/setMenu.js"%>
    <%@ include file="../../utils/baseUrl.jsp"%>
    <%@ include file="../../static/getRoleButtons.js"%>
    <%@ include file="../../static/crossBtnControl.js"%>

    // 用户登出
    <%@ include file="../../static/logout.jsp"%>

    $(document).ready(function () {
        //激活翻页按钮
        $('#tableId_previous').attr('class', 'paginate_button page-item previous')
        $('#tableId_next').attr('class', 'paginate_button page-item next')
        //隐藏原生搜索框
        $('#tableId_filter').hide()
        //设置右上角用户名
        $('.dropdown-menu h5').html(window.sessionStorage.getItem('username') + '(' + window.sessionStorage.getItem('role') + ')')
        //设置项目名
        $('.sidebar-header h3 a').html(projectName)
        setMenu();
        <%@ include file="../../static/myInfo.js"%>
    });
</script>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    const examinationPaperList = new Vue({
        el: "#examinationPaperList",
        data() {
            return {
                // 试卷名称
                paperName: '',
                // 当前页
                pageIndex: 1,
                // 每页显示条数
                pageSize: 10,
                // 总页数
                pages: 0,
                // 总条数
                total: 400,
                tableData: [
                    {
                        id: 1,
                        paperName: '一模测试卷',
                        examDuration: 60,
                        status: 0
                    },
                    {
                        id: 2,
                        paperName: '二模测试卷',
                        examDuration: 120,
                        status: 1
                    },
                ]
            }
        },
        methods: {
            handleSizeChange(val) {
                console.debug('每页' + val + '条');
                this.pageSize = val;
                this.getPaperList();
            },
            handleCurrentChange(val) {
                console.debug('当前页: ' + val);
                this.pageIndex = val;
                this.getPaperList()
            },
            statusFormatter(row, column) {
                return row.status == 1 ? '启用' : '禁用'
            },
            handleEdit: function (id) {
                console.debug('编辑' + id)
                // 保存修改的编号
                window.sessionStorage.setItem("editTestPaperId", id);
                // 跳转到编辑页面
                window.location.href = "modify.jsp";
            },
            handleDelete: function (id) {
                const _this = this;
                console.debug('删除' + id)
                axios({
                    url: '${pageContext.request.contextPath}/examination/delete?id=' + id,
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json',
                        'token': window.sessionStorage.getItem('token')
                    }
                }).then(function (res) {
                    const {code, msg} = res.data;
                    if (code === 200) {
                        _this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        _this.getPaperList();
                    } else {
                        _this.$message({
                            message: msg,
                            type: 'error'
                        });
                    }
                }).catch(function (error) {
                    console.error(error)
                })
            },
            searchPaper: function () {
                console.debug('搜索')
                this.getPaperList()
            },
            // 请求获取试卷列表
            getPaperList: function () {
                let _this = this;
                this.tableData = []
                axios({
                    url: '${pageContext.request.contextPath}/examination/pageList',
                    type: 'get',
                    params: {
                        pageIndex: _this.pageIndex,
                        pageSize: _this.pageSize,
                        name: _this.paperName
                    },
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8',
                        'token': window.sessionStorage.getItem('token')
                    }
                }).then(function (res) {
                    console.debug(res);
                    const {code, data} = res.data;
                    if (code === 200) {
                        _this.pages = data.pages;
                        _this.total = data.total;
                        data.records.forEach(function (item) {
                            _this.tableData.push({
                                id: item.id,
                                paperName: item.name,
                                examDuration: item.examduration,
                                status: item.status
                            })
                        })
                    }
                }).catch(function (err) {
                    console.error(err);
                })
            },
            createTestPaperPage: function () {
                window.location.href = "add.jsp"
            }
        },
        mounted: function () {
            // 请求获取试卷列表
            this.getPaperList();
        }
    });
</script>
</body>

</html>